<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        body {
            /* 使用背景图片并让其铺满整个屏幕，可根据需求调整 */
            background-image: url('/img/backgroud_login.jpg');
            background-size: cover;
            background-position: center;
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            /* 设置最小高度和最大高度，确保页面布局相对合理 */
            min-height: 100vh;
            max-height: 100vh;
            /* 设置body的透明度为半透明，这里使用rgba颜色模式来设置背景颜色，同时设置透明度为0.5 */
            background-color: rgba(244, 244, 244, 0.8);
        }

        .container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
            /* 使用相对单位设置宽度，这里设置为屏幕宽度的80%，可根据实际情况调整 */
            width: 80%;
            max-width: 400px;
            min-width: 300px;
            /* 设置容器的透明度为半透明，这里使用opacity属性，值为0.8，表示80%的不透明度，即半透明效果 */
            opacity: 0.8;
        }

        h2 {
            text-align: center;
            color: #333;
        }

        label {
            margin-bottom: 5px;
            color: #555;
            font-weight: bold;
            display: block;
        }

        input[type="text"],
        input[type="password"],
        input[type="email"],
        input[type="tel"],
        select {
            width: 100%;
            padding: 10px;
            margin: 8px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            /* 添加一些内边距微调，让输入内容更舒适 */
            padding-left: 15px;
            padding-right: 1px;
        }

        input[type="submit"] {
            background-color: #28a745;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
            width: 100%;
            /* 添加悬停效果增强 */
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        input[type="submit"]:hover {
            background-color: #218838;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
<div class="container">
    <h2>用户注册</h2>
    <form action="register" method="post">
        <div>
            <label for="userid">账号:</label>
            <input type="text" id="userid" name="userid" required placeholder="请输入账号">
        </div>
        <div>
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" required placeholder="请输入用户名">
        </div>
        <div>
            <label for="userpwd">密码:</label>
            <input type="password" id="userpwd" name="userpwd" required placeholder="请输入密码">
        </div>
        <div>
            <label for="usersex">性别:</label>
            <select id="usersex" name="usersex" required>
                <option value="">请选择性别</option>
                <option value="male">男</option>
                <option value="female">女</option>
                <option value="other">其他</option>
            </select>
        </div>
        <div>
            <label for="email">邮箱:</label>
            <input type="email" id="email" name="email" required placeholder="请输入邮箱">
        </div>
        <div>
            <label for="phone">电话:</label>
            <input type="tel" id="phone" name="phone" required placeholder="请输入电话">
        </div>
        <div>
            <input type="submit" value="注册">
        </div>
        <div class="footer">
            <p>已有账户? <a href="/login">登录</a></p>
        </div>
    </form>
</div>
</body>
</html>

